<template>
    <ul class="componet-box">
        <li v-for="(item,idx) in listData" :key="item.text" :class="getClass(idx)">
            <aside class="date">
                <span>{{ item.date.substring(8, 10) }}</span>
                <span>{{ item.date.substring(5, 7) }}月</span>
            </aside>
            <a :href="item.href">{{ item.text }}</a>
        </li>
    </ul>
</template>
  
<script setup lang="ts">
const listData = [
    { date: "2023-06-12", "href": "https://www.scvtc.edu.cn/info/1046/23102.htm", "text": "四川职业技术学院关于2023年上半年公开招聘工作人员考试总成绩及参加体检人员的公告" },
    { date: "2023-06-07", "href": "https://www.scvtc.edu.cn/info/1046/23061.htm", "text": "四川职业技术学院关于办学地址的补充说明" },
    { date: "2023-05-06", "href": "https://www.scvtc.edu.cn/info/1046/22675.htm", "text": "四川职业技术学院2023年校园招聘会公告" },
    { date: "2023-12-02", "href": "https://www.scvtc.edu.cn/info/1046/21348.htm", "text": "四川职业技术学院2022—2023年高层次人才招聘公告" },
    { date: "2023-05-19", "href": "https://www.scvtc.edu.cn/info/1046/22198.htm", "text": "四川职业技术学院2023年面向社会公开招聘部分二级学院院长公告" },
    { date: "2023-03-19", "href": "https://www.scvtc.edu.cn/info/1046/23131.htm", "text": "关于举行第十八届校园心理健康文化节闭幕式暨颁奖典礼的通知" },
    { date: "2023-06-14", "href": "https://www.scvtc.edu.cn/info/1046/23130.htm", "text": "关于做好四川职业技术学院2023年大型校园招聘会的通知" }];


const getClass = (idx:number) => {
    if (idx == 4 || idx == 5) {
        return "list-item important";
    } else {
        return "list-item";
    }
}

</script>
<style scoped lang="scss">
.componet-box {

    margin-top: 8px;
    // padding-top: 10px;

    .list-item {
        display: flex;
        align-items: center;
        padding: 20px 0px;
        line-height: 24px;
        border-bottom: 1px solid #e9f0f7;

        &.important {
            color: #f70552;
            font-weight: 700;

            &:hover {
                color: #f70552;
            }
        }

        &:hover {
            color: #b80000;

            span:nth-child(2) {
                color: #b80000;
            }
        }

        aside {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #ececec;
            border-radius: 5px;
            padding: 10px 5px;
            margin-right: 20px;

            &>span:nth-child(1) {
                color: #bc0014;
                font-size: 24px;
            }

            &>span:nth-child(2) {
                color: #6c5454;
                font-size: 13px;
                display: block;
                width: 30px;
            }
        }
    }

}
</style>